<template>
    <div class="visual_chart2" id="main8"></div>
</template>

<script>
    export default {
        name: "Main8",
        data(){
            return{
                allData:{

                },
                citys:[{
                    name:null,
                    value:[],
                    symbolSize:null,
                    itemStyle:{
                        normal:{
                            color:null
                        }
                    }
                }],
                moveLines:[{
                    fromName:null,
                    toName:null,
                    coords:[[],[]]
                }]
            }
        },
        created() {
            this.$axios.get('/data.json',{}).then(response=>{
                // this.$data.allData=response.data
                this.$data.citys = response.data.citys
                // console.log('返回的数据',response.data.citys)
            })
            // console.log('data的数据',this.$data.citys)
        },
        mounted() {
            // this.$axios.get('/data.json',{}).then(response=>(console.log(response)))
            // console.log(this.$data.allData)
            this.drawChart()
        },
        methods:{
            drawChart(){
                let main8 = this.$echarts.init(document.getElementById('main8'))
                main8.setOption({
                    title: {
                        text: '',
                        left: 'center',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    legend: {
                        show: false,
                        orient: 'vertical',
                        top: 'bottom',
                        left: 'right',
                        data: ['地点', '线路'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    geo: {
                        map: 'china',
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: 'rgba(7,21,57,0.5)',
                                borderColor: '#0177ff'
                            },
                            emphasis: {
                                areaColor: '#071537'//鼠标指上市时的颜色
                            }
                        }
                    },
                    series: [{
                        name: '地点',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        label: {
                            emphasis: {
                                show: true,
                                position: 'right',
                                formatter: '{b}'
                            }
                        },
                        symbolSize: 2,
                        showEffectOn: 'render',
                        itemStyle: {
                            normal: {
                                color: '#46bee9'
                            }
                        },
                        data: this.$data.allData.citys
                    }, {
                        name: '线路',
                        type: 'lines',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        large: true,
                        effect: {
                            show: true,
                            constantSpeed: 30,
                            symbol: 'pin',
                            symbolSize: 3,
                            trailLength: 0,
                        },
                        lineStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0, color: '#58B3CC'
                                }, {
                                    offset: 1, color: '#F58158'
                                }], false),
                                width: 1,
                                opacity: 0.2,
                                curveness: 0.1
                            }
                        },
                        data: this.$data.allData.moveLines
                    }]
                })
                // console.log("数据赋值了吗",this.$data.allData)
            }
        }
    }
</script>

<style scoped>
</style>